<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>查一查</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="众测天下@zhongcetianxia.com">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<link rel="stylesheet" type="text/css" href="../../Public/template/green/css/webapp.css" />
<!--<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>-->
<script src="http://wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
</head>
<body>
<div class="page" id="page-no-infinite-scroll">
    <header class="bar bar-nav bg-main bg-inverse">
        <div class="row no-gutter">
            <a class="icon icon-left pull-left back col-10" href="../Index/index.html"></a>
            <div class="col-90">
                <div class="searchbar row bg-no">
                    <div class="search-input col-80">
                        <label class="icon icon-search" for="search"></label>
                        <input class="r-round" type="search" id='search' placeholder='输入关键字...' autocomplete="on" />
                    </div>
                    <div class="col-20 text-center"><a href="javascript:void(0)" id="submit">搜索</a></div>
                </div>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="content-block-title mt-1x">热门搜索</div>
        <div class="content-padded grid-demo">
            <div class="row">
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">粮食</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">生鲜</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">调味品</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">食用油</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">乳制品</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">糖果</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">饮料</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">茶叶</div></a>
                </div>
                <div class="col-33 text-center mb-0x">
                    <a href="../Search/result.html"><div class="bg-white p r text-nowrap color-dark">薯片</div></a>
                </div>
            </div>
        </div>
        <div class="list-block contacts-block media-list mt-2x">
            <ul class="list-container search-history">
                <li class="list-group-title color-grey">最近搜过</li>
                <!--<li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title color-grey">蔬菜</div>
                                <div class="item-after color-grey">✕</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title color-grey">水果</div>
                                <div class="item-after color-grey">✕</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title color-grey">饮料</div>
                                <div class="item-after color-grey">✕</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title-row">
                                <div class="item-title color-grey">食用油</div>
                                <div class="item-after color-grey">✕</div>
                            </div>
                        </div>
                    </div>
                </li>-->
                <li>
                    <a class="item-content clearall">
                        <div class="item-inner">
                            <div class="item-title color-grey text-center">清楚搜索历史</div>
                        </div>
                    </a>
                </li>
                </ul>
        </div>
    </div>
</div>
<script type="text/javascript">var basePath="../../Public/template/green";</script>
<script type="text/javascript" src="../../Public/template/green/js/loading.js"></script>
<script type="text/javascript" src="../../Public/template/green/sui/sm.min.js"></script>
<script type="text/javascript" src="../../Public/template/green/js/webapp.js"></script>
<!--Local storage-->
<script type="text/javascript" src="../../Public/template/green/js/store.min.js"></script>
<script>
$(function () {
    'use strict';
    //查找某个值在数组中的位置
    Array.prototype.indexOf = function(val) {  
        for (var i = 0; i < this.length; i++) {  
            if (this[i] == val) return i;  
        }  
        return -1;  
    };

    //从数组中删除某个值
    Array.prototype.remove = function(val) {  
        var index = this.indexOf(val);  
        if (index > -1) {  
            this.splice(index, 1);  
        }  
    }; 

    if (!store.enabled) {
        alert('Local storage is not supported by your browser. Please disable "Private Mode", or upgrade to a modern browser.')
        return
    }
    var keywords = new Array();
    //store.set('keywords', ['蔬菜', '水果', '饮料']);
    keywords = store.get('keywords');
    var html = '';
    if(keywords!=null){
        for(var i=0;i<keywords.length;i++){
            //alert(keywords[i]);
            html += '<li class="list-item" data-item="'+keywords[i]+'"><div class="item-content"><div class="item-inner"><div class="item-title-row"><div class="item-title color-grey">'+keywords[i]+'</div><a class="item-after color-grey clearthis">✕</a></div></div></div></li>';            
        }
        $('.search-history .list-group-title').after(html); 
    }

    //搜索 
    $("#submit").on("click",function(){
        //alert(document.getElementById("search").value);
        if(document.getElementById("search").value!=null){
            var words = new Array();
            words = store.get('keywords');
            
            //关键词数组中无该关键词才存入
            if(words.indexOf(document.getElementById("search").value)==-1){
                words.push(document.getElementById("search").value);
                store.set('keywords',words);
            }
            
        }
    }); 

    //清除单个搜索记录 
    $(".clearthis").on("click",function(){
        var words = store.get('keywords');
        var key = $(this).parent().parent().parent().parent('.list-item').attr('data-item');
        alert(key);        

        words.remove(key); 
        store.set('keywords',words);
        $(this).parent().parent().parent().parent('.list-item').remove(); 
        //alert('OK');
    });       

    //清空搜索历史
    $(".clearall").on("click",function(){
        store.set('keywords',[]);
        //store.clear();
        $('.list-item').remove(); 
        //alert('OK');
    });
});        
</script>
</body>
</html>
